<template>
  <div class="engagement-sources-card">
    <div class="engagement-header">
      <div class="engagement-title">Competition Overview</div>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        fit
        :header-cell-style="{
          background: '#fff',
          color: '#232323',
          fontWeight: '600',
          textAlign: 'center',
          fontSize: '12px',
          height: '33px',
        }"
        :cell-style="{
          textAlign: 'center',
          background: '#fff',
          color: '#454545',
          fontWeight: '400',
          fontSize: '12px',
          height: '33px',
          textAlign: 'center',
        }"
      >
        <!-- KPI 列，直接渲染 kpi 字段 -->
        <el-table-column label="KPI">
          <template slot-scope="scope">
            <div class="kpi-cell">
              {{ scope.row.kpi }}
            </div>
          </template>
        </el-table-column>
        <!-- 各酒店数据列，直接渲染对应 value -->
        <el-table-column label="Your hotel" :min-width="55">
          <template slot-scope="scope">
            {{ scope.row.yourHotel }}
          </template>
        </el-table-column>
        <el-table-column label="Hotel 2" :min-width="42">
          <template slot-scope="scope">
            {{ scope.row.hotel2 }}
          </template>
        </el-table-column>
        <el-table-column label="Hotel 3" :min-width="42">
          <template slot-scope="scope">
            {{ scope.row.hotel3 }}
          </template>
        </el-table-column>
        <el-table-column label="Hotel 4" :min-width="42">
          <template slot-scope="scope">
            {{ scope.row.hotel4 }}
          </template>
        </el-table-column>
        <el-table-column label="Hotel 5" :min-width="42">
          <template slot-scope="scope">
            {{ scope.row.hotel5 }}
          </template>
        </el-table-column>
        <el-table-column label="Hotel 6"   :min-width="42" 
          :cell-style="{ textAlign: 'right' }">
          <template slot-scope="scope">
            {{ scope.row.hotel6 }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";

export default {
  components: {
    PieChart,
  },
  data() {
    return {
      tableData: [
        {
          kpi: "Posts last month",
          yourHotel: "45",
          hotel2: "12",
          hotel3: "46",
          hotel4: "43",
          hotel5: "34",
          hotel6: "45",
        },
        {
          kpi: "Engagement Rate",
          yourHotel: "5.7%",
          hotel2: "5.5%",
          hotel3: "4.8%",
          hotel4: "7.2%",
          hotel5: "6.3%",
          hotel6: "6.5%",
        },
        {
          kpi: "Positive Sentiment",
          yourHotel: "57%",
          hotel2: "92%",
          hotel3: "65%",
          hotel4: "42%",
          hotel5: "78%",
          hotel6: "78%",
        },
        {
          kpi: "UGC Richness Score",
          yourHotel: "7.81",
          hotel2: "6.65",
          hotel3: "5.65",
          hotel4: "8.43",
          hotel5: "5.89",
          hotel6: "4.98",
        },
        {
          kpi: "KPI 5",
          yourHotel: "57%",
          hotel2: "92%",
          hotel3: "65%",
          hotel4: "42%",
          hotel5: "78%",
          hotel6: "78%",
        },
        {
          kpi: "KPI 6",
          yourHotel: "7.81",
          hotel2: "6.65",
          hotel3: "5.65",
          hotel4: "8.43",
          hotel5: "5.89",
          hotel6: "4.98",
        },
      ],
    };
  },
  computed: {},
  methods: {},
};
</script>

<style scoped lang="scss">
.engagement-sources-card {
  position: relative;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid #cdcccc;
  .engagement-header {
    font-size: 18px;
    font-weight: 600;
    color: #454545;
  }
  .kpi-cell {
     white-space: nowrap; /* 强制不换行 */
    overflow: visible;   /* 内容超出时不隐藏 */
    text-overflow: clip; /* 超出部分不显示省略号 */
  }
}
</style>
